<template>
  <div class="details" v-if="Object.keys(details.data).length > 0">
    <div class="back">
      <button @click="back"><span><</span>返回</button>
    </div>
    <banner-view :gallery="details.data.info.gallery" />
    <info-view :info="details.data.info" />
    <tab-view
      :productList="details.data.productList"
      :attribute="details.data.attribute"
    />
    <!-- <gallery-view :productList="details.data.productList" /> -->
  </div>
</template>
 
<script setup>
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { useDetailsStore } from '../../stores/index'
import bannerView from './banner.vue'
import infoView from './info.vue'
import tabView from './tab/tab.vue'
import galleryView from './gallery.vue'

const route = useRoute()

let details = useDetailsStore()
onMounted(async () => {
  await details.fetchGetDetails(route.params.id)
  // console.log(details.data)
})

//返回
const back = () => {
  history.back()
}
</script>

<style scoped>
.details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: rgb(235, 235, 235);
}
.back {
  width: 100%;
  background-color: white;
  /* border: 1px solid #000; */
}
button {
  padding: 10px;
  color: rgb(0, 38, 255);
  background-color: white;
  border: 0;
}
</style>
